<template>
  <div style="overflow-y: auto">
    <FormCourse v-model:formDetail="form" v-model:id="form.id" :marginTop="'0px'" @success="saveSuccess" />
    <FormSpecimen v-model:formDetail="form" v-model:id="form.id" :marginTop="'10px'" @success="saveSuccess" />
    <FormPerson v-model:formDetail="form" v-model:id="form.id" :marginTop="'10px'" @success="saveSuccess" />
    <FormStele :marginTop="'10px'" />
    <FormRoom :marginTop="'10px'" />
    <FormSquare :marginTop="'10px'" />
    <formRoad :margin-top="'10px'" />
  </div>
</template>

<script setup lang="ts" name="ZLSummarizeData">
import { onMounted, ref } from 'vue'
import { EducationResource, getEducationResourceDetail } from '@api/tby/education/educationResource'
import FormCourse from './form-course.vue'
import FormSpecimen from './form-specimen.vue'
import FormPerson from './form-person.vue'
import FormStele from './form-stele.vue'
import FormRoom from './form-room.vue'
import FormSquare from './form-square.vue'
import formRoad from './form-road.vue'
const form = ref<Partial<EducationResource.Form>>({})

const saveSuccess = (id: number) => {
  form.value.id = id
}

onMounted(() => {
  getEducationResourceDetail().then(({ data }) => {
    form.value = data
  })
})
</script>
